<template>
    <yd-tabbar slot="tabbar" activeColor="#FF4040" fixed exact activeClass>
      
      <yd-tabbar-item v-for="(item,idx) in myData" :title="item.name" :link="item.link" :dot="item.dot" :active="item.clicked">
        
        <yd-icon :name="item.icon" slot="icon" size="0.5rem"></yd-icon>
        
      </yd-tabbar-item>
    <!--
      <yd-tabbar-item title="首页" link="/" active>
        <yd-icon name="home" slot="icon" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="发现" link="/find">
        <yd-icon name="discover" slot="icon" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="分类" link="/category">
        <yd-icon name="type" slot="icon" size="0.5rem"></yd-icon>
      </yd-tabbar-item>

      <yd-tabbar-item title="购物车" link="/cart" :dot="stat">
        <yd-icon name="shopcart-outline" slot="icon" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="个人中心" link="/user">
        <yd-icon name="ucenter-outline" slot="icon" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
      -->
    </yd-tabbar>
</template>

<script>
  export default {
    name: 'footer',
    data() {
      return {
        stat: false,
        myData:[
          {
            id: 0,
            name: "首页",
            link: "/",
            icon: "home",
            clicked: false,
            dot: false
          },
          {
            id: 1,
            name: "发现",
            link: "/find",
            icon: "discover",
            clicked: false,
            dot: false
          },
          {
            id: 2,
            name: "分类",
            link: "/category",
            icon: "type",
            clicked: false,
            dot: false
          },
          {
            id: 3,
            name: "购物车",
            link: "/cart",
            icon: "shopcart",
            clicked: false,
            dot: false
          },
          {
            id: 4,
            name: "个人中心",
            link: "/user",
            icon: "ucenter",
            clicked: false,
            dot: false
          }
        ]
      }
    },
    created () {
      let cartNum = this.$store.store.state.cartGoodsNum;
      if(cartNum>0){
        this.stat = true;
        this.myData[3].dot = true
        // console.log(this.stat);
      }
      let myPageId = this.$store.store.state.pageId;
      console.log(myPageId);
      switch(myPageId){
        case myPageId="home": this.myData[0].clicked = true; break;
        case myPageId="find": this.myData[1].clicked = true; break;
        case myPageId="category": this.myData[2].clicked = true; break;
        case myPageId="cart": this.myData[3].clicked = true; break;
        case myPageId="user": this.myData[4].clicked = true; break;

      }
    },
    methods:{
      change(id){
        // this.myData[idx].clicked = true;
        console.log(id);
      }
    }
  }

</script>

<style>
/* 对底部导航的处理  todo 底部导航动态高亮显示；*/
  .yd-tabbar{
    z-index:10;
    margin-top:5px;
    position: fixed;
    bottom: 0;
  }

</style>
